<template>
	<view class="container">
		<view class="error-tip" v-if="emtpyList && payTypeList.length === 0">
			<text>获取渠道失败</text>
			<button class="cu-btn round sm margin-top bg-cyan" @click="getAccountMoney()">重新加载</button>
		</view>
		<view v-else>
			<view class="np-cash-head">
				<view class="np-pay-list">
					<view>到账渠道</view>
					<view class="np-pay">
						<view class="np-pay-name" :class="[activeIndex == index ? item.active_color : '']" v-for="(item,index) in payTypeList"
						 :key="index" @click="seletePay(index)">
							<text class="nuopianfont" :class="item.icon ? item.icon : ''"></text>
							<text class="way-text">{{item.name}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="np-pay-box" v-if="activeName && activeName != '微信零钱'">
				<text>真实姓名</text>
				<view class="input-money">
					<input type="text" v-model="cachName" @blur="hideKeyborad" class="input-box" />
				</view>
			</view>
			<view class="np-pay-box" v-if="activeName && activeName != '微信零钱'">
				<text>{{activeName}}帐号</text>
				<view class="input-money">
					<input type="text" v-model="caseAccount" @blur="hideKeyborad" class="input-box" />
				</view>
			</view>
			<view class="np-cash-body">
				<text>提现金额</text>
				<view class="input-money">
					<text class="rmb">￥</text>
					<input type="text" v-model.number="price" @blur="hideKeyborad" @confirm="getMoney" class="t-input" />
				</view>
				<view class="info-money">
					<view class="margin-bottom-sm">
						<text class="info-money-num">当前可提现余额{{ accountMoney }}元</text>
					</view>
					<view :class="'tx' + (loading ? '' : '-active')"><button @click="getMoney">提现</button></view>
				</view>
			</view>
			<view class="cash-list" @click="navTo">
				查看提现记录
			</view>
		</view>
	</view>
</template>

<script>
	import base from '@/common/base.js';
	export default {
		mixins: [base],
		data() {
			return {
				activeIndex: 0,
				activeName: '',
				price: "",
				accountMoney: 0,
				minMoney: 1,
				loading: false,
				payTypeList: [],
				cachName: '',
				caseAccount: '',
				emtpyList: false
			};
		},

		onLoad() {
			this.getAccountMoney();
			uni.getStorage({
				key: "USERCASHACCOUNT",
				success: (res)=>{
					this.cachName = res.data.name;
					this.caseAccount = res.data.account;
				}
			});
			uni.setNavigationBarTitle({
				title: "佣金提现"
			});
		},
		methods: {
			navTo(){
				uni.navigateTo({
					url: "/pages/user/cash-list"
				});
			},
			getAccountMoney() {
				this.emtpyList = false;
				this.$http.get('api/user/account-money').then((res) => {
					this.accountMoney = res.account_money;
					this.minMoney = res.min_money;
					this.payTypeList = res.list;
					let userInfo = this.userInfo;
					userInfo.account.user_money = res.account_money;
					this.updateUserInfo(userInfo);
					if (this.payTypeList.length != 0) {
						this.seletePay(0);
					} else {
						this.emtpyList = true;
					}
				}).catch((err) => {
					this.emtpyList = true;
				});
			},
			seletePay(index) {
				this.activeIndex = index;
				this.activeName = this.payTypeList[index].name;
			},
			hideKeyborad() {
				uni.hideKeyboard();
			},
			getMoney() {
				this.loading = true;
				if (this.activeName && this.activeName != '微信零钱') {
					if (!this.cachName) {
						this.$config.toast('请输入真实姓名');
						this.loading = false;
						return;
					}
					if (!this.caseAccount) {
						this.$config.toast('请输入收款帐号');
						this.loading = false;
						return;
					}
				}
				if (parseFloat(this.price).toString() == 'NaN') {
					this.$config.toast('输入金额不合法');
					this.loading = false;
					return;
				}
				if (!this.price || this.price < this.minMoney) {
					this.$config.toast("最低" + this.minMoney + "元起提现");
					this.loading = false;
					return;
				}
				if (this.price > this.accountMoney) {
					this.$config.toast("余额不足");
					this.loading = false;
					return;
				}
				let data = {};
				let payType = this.payTypeList[this.activeIndex].sub_name;
				data.money = this.price;
				data.pay_type = payType;
				if (payType != 'wechat') {
					data.name = this.cachName;
					data.account = this.caseAccount;
				}
				let cacheData = {
					name: this.cachName,
					account: this.caseAccount
				};
				uni.setStorage({
					key: "USERCASHACCOUNT",
					data: cacheData
				});
				uni.showLoading({
					title: "提交中..."
				});
				this.$http.post('api/user/cash', data).then((res) => {
					uni.hideLoading();
					this.loading = false;
					this.accountMoney = res.user_money;
					let userInfo = this.userInfo;
					userInfo.account.user_money = res.user_money;
					this.updateUserInfo(userInfo);
					uni.showModal({
						title: "提示",
						content: res.msg,
						showCancel: false
					});
				}).catch((error) => {
					uni.hideLoading();
					this.loading = false;
					this.$config.toast(error.message);
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 40rpx;
		.error-tip {
			margin-top: 150rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		.np-cash-head {
			background: #e7e7e7;
			padding: 40rpx 60rpx;
			font-size: 14px;
			display: flex;
			flex-direction: column;

			.np-pay-list {
				display: flex;
				align-content: center;

				.np-pay {
					display: flex;
					flex-direction: row;
					align-content: center;
					margin-left: 40rpx;

					.np-pay-name {
						color: #576b95;
						margin-right: 20rpx;
						margin-bottom: 20rpx;

						.nuopianfont {
							font-size: 32rpx;
						}
					}

					.np-cash-head-way-2 {
						color: #acacac;
						font-size: 24rpx;
					}

					.active-wechat {
						color: #46bb36;
					}

					.active-alipay {
						color: #02a9f1;
					}
				}
			}
		}

		.np-pay-box {
			background: #fff;
			padding: 15rpx 60rpx;
			font-size: 24rpx;

			.input-money {
				display: flex;
				align-content: center;
				font-weight: 600;
				border-bottom: 0.5px solid #eaeef1;

				.input-box {
					height: 60rpx;
					font-size: 24rpx;
					border: none;
					outline: none;
				}
			}
		}

		.np-cash-body {
			background: #fff;
			padding: 40rpx 60rpx;
			font-size: 24rpx;

			.input-money {
				display: flex;
				align-content: center;
				font-weight: 600;
				border-bottom: 0.5px solid #eaeef1;

				.rmb {
					font-size: 2em;
					top: 10px;
					position: relative;
				}

				.t-input {
					height: 1.9em;
					font-size: 2.5em;
					border: none;
					position: relative;
					left: 3.5%;
					outline: none;
				}
			}

			.info-money {
				margin-top: 10px;
				font-size: 12px;
				margin-bottom: 20px;

				.info-money-num {
					color: #b2b2b2;
				}
			}

			.tx {
				button {
					color: #b2b2b2;
				}
			}

			.tx-active {
				button {
					color: #fff;
					background: #07c160;
				}
			}
		}
	}
	
	.cash-list {
		margin-top: 50rpx;
		display: flex;
		justify-content: center;
		font-size: 28rpx;
		color: #777777;
	}
</style>
